

<script src="/assets/libs/fastadmin-layer/dist/layer.js"></script>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="/file/schedule/css/style.css">
<script src="/file/schedule/js/jquery.step.js"></script>
<style>
    body{
        background: #fff;
    }
    .operation{
        margin-top: 50px;
        text-align: center;
    }
    .step-header{
        min-height: 130px;
    }
    .step-list{
        width: 912px;
        margin: 10px auto;
    }

    .progress-bar {
        width: 100%;
        background-color: #eee;
        height: 20px;
        position: relative;
        margin: 20px 0;
        border-radius: 5px;
        display: none;
        margin-top: 200px;
    }

    .progress {

        background-color: #3FBF4E;
        height: 20px;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 5px;
    }
    .progress-status {
        width: 100%;
        text-align: center;
        color: #000;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
    }
    #success_html th{
        min-width: 100px;
    }
</style>
<div class="container">

    <div class="step-body" id="myStep">
        <h1 style="text-align: center">{$title}</h1>
        <div class="step-header " style="width:80%">
            <ul>
                <li><p>下载模板</p></li>
                <li><p>上传文件</p></li>
                <li><p>执行预览</p></li>
                <li><p>执行导入</p></li>
                <li><p>导入完成</p></li>
            </ul>
        </div>
        <div class="step-content">
            <div class="step-list">

                <div class="panel panel-default">
                    <div class="panel-body">
                        <h2>导入提示</h2>
                        <p style="margin-top: 30px;color: grey">
                            请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除，单次导入的数据不超过1000条。
                        </p>

                        <p style="margin-top: 30px">
                            <a href="{$url}" target="_blank">点击下载</a>
                        </p>
                    </div>
                </div>
                <div class="operation">
                    <button onclick="next_step()" class="btn btn-success">已下载文件，下一步</button>
                    <button onclick="location.href='{$jump_url}'" class="btn btn-info">取消上传，返回列表</button>
                </div>

            </div>
            <div class="step-list">
                <div class="no_progress" style="width: 100%;">
                    <form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
                        <h2>文件:</h2>
                        <input id="c-file_url" data-rule="" class="form-control" size="50" name="row[file_url]" type="text" value="">
                        <button style="margin-top: 20px" type="button" id="faupload-file_url" class="btn btn-danger faupload" data-input-id="c-file_url" data-mimetype="xlsx" data-multiple="false" data-preview-id="p-file_url"><i class="fa fa-upload"></i> {:__('Upload')}</button>

                        <h2 style="margin-bottom: 10px;">适用周期:</h2>
                        <input id="c-start_date" style="width: 30%" data-rule="" class="form-control" size="50" name="row[start_date]" type="date" value="">
                        <input id="c-end_date" style="width: 30%" data-rule="" class="form-control" size="50" name="row[end_date]" type="date" value="">
                    </form>
                </div>
                <div class="operation no_progress">
                    <button onclick="previous_step()" class="btn btn-default">上一步</button>
                    <button onclick="import_post()" class="btn btn-success">导入数据</button>
                </div>
                <div class="progress-bar">
                    <div class="progress"></div>
                    <div class="progress-status">0%</div>
                </div>
            </div>
            <div class="step-list" style="width: 100%;margin: 0px auto">

                <p class="lead no_progress">
                    执行成功：总数据 <mark id="all_count"></mark>,成功数据 <mark id="success_count" style="color: green"></mark>,失败数据<mark id="error_count" style="color: red"></mark>
                </p>
                <ol class="no_progress" id="error_html" style="width: 100%;height: 200px;overflow: auto;margin-bottom: 30px;">

                </ol>
                <div class="no_progress" style="width: 100%;height: 200px;overflow: auto;margin-bottom: 30px;">
                    <table id="success_html" class="table table-striped" >

                    </table>
                </div>


                <div class="operation no_progress">
                    <button onclick="previous_step()" class="btn btn-default">上一步</button>
                    <button onclick="import_success()" class="btn btn-success">执行操作</button>
                </div>


            </div>
            <div class="step-list">
                <div class="progress-bar">
                    <div class="progress"></div>
                    <div class="progress-status">0%</div>
                </div>
            </div>
            <div class="step-list">

                <div class="operation no_progress">

                    <button onclick="location.href='{$jump_url}'" class="btn btn-info">上传完成，返回列表</button>
                </div>
            </div>

        </div>

    </div>

</div>
<script>


    var step= $("#myStep").step();
    var type = "<?php echo $type;?>";
    function next_step(){
        var yes = step.nextStep();
    }

    function previous_step(){
        var yes=step.preStep();//上一步
    }

    var index;
    var file_id = 0;
    // 导入数据
    function import_post(){
        var file_url = $('#c-file_url').val();
        var start_data = $('#c-start_date').val();
        var end_date = $('#c-end_date').val();
        if(!file_url){
            layer.msg('请上传文件');
            return false
        }else if(!start_data || !end_date){
            layer.msg('请选择周期范围');
            return false
        }
        $.ajax({
            url:"/CzTIqcuemD.php/basis/import/import",    //请求的url地址
            dataType:"json",   //返回格式为json
            async:true,//请求是否异步，默认为异步，这也是ajax重要特性
            data:{file:file_url,start_data:start_data,end_date:end_date,type:type,operation:'upload'},    //参数值
            type:"post",   //请求方式
            beforeSend:function(){
                //请求前的处理
                index = layer.load();
            },
            success:function(req){
                //请求成功时处理
                layer.close(index);
                if(req.code == 1){
                    file_id = req.data;
                    $('.progress-bar').show();
                    $('.no_progress').hide();
                    implement();
                }else{
                    layer.msg(req.msg);
                }
            },
            complete:function(){
                //请求完成的处理
                layer.close(index);
            },
        });
    }

    function implement(){
        $.ajax({
            url:"/CzTIqcuemD.php/basis/import/import",    //请求的url地址
            dataType:"json",   //返回格式为json
            async:true,//请求是否异步，默认为异步，这也是ajax重要特性
            data:{file_id:file_id,type:type,operation:'schedule'},    //参数值
            type:"post",   //请求方式
            success:function(req){
                //请求成功时处理
                layer.close(index);
                if(req.code == 1){
                    if(req.data.schedule == 100){
                        $('.progress-status').html('100%');
                        $('.progress').animate({width:"100%"},1000);

                        $('#all_count').html(req.data.all_count);
                        $('#error_count').html(req.data.error_count);
                        $('#success_count').html(req.data.success_count);
                        var error_html = '';
                        for(var i=0;i<req.data.error_data.length;i++){
                            error_html += '<li><span>第 <span style="color:red;">'+req.data.error_data[i].line+'</span>  行 : '+req.data.error_data[i].msg+'</span></li>';
                        }
                        $('#error_html').html(error_html);

                        var success_html = '<tr style="background: #4e73df;color: #fff">';
                        for (var i=0;i<req.data.title.length;i++){
                            success_html += "<th>"+req.data.title[i]+"</th>";
                        }
                        success_html += "</tr>";

                        for (var i=0;i<req.data.success_list.length;i++){
                            success_html += "<tr>"
                            for (var j=0;j<req.data.success_list[i].length;j++){
                                success_html += "<td>"+req.data.success_list[i][j]+"</td>";
                            }
                            success_html += "</tr>"
                        }
                        $('#success_html').html(success_html);

                        setTimeout(function (){

                            $('.progress-status').html('0%');
                            $('.progress').animate({width:"0%"},1000);
                            $('.progress-bar').hide();
                            $('.no_progress').show();
                            next_step();
                        },1000)
                    }else{
                        $('.progress-status').html(req.data.schedule+'%');
                        $('.progress').animate({width:req.data.schedule+"%"},1000);
                        implement();
                    }
                }else{
                    layer.msg(req.msg);
                }
            },
            complete:function(){
                //请求完成的处理
                layer.close(index);
            },
        });
    }

    function import_success(){
        next_step();
        $('.progress-bar').show();
        $('.no_progress').hide();
        implement_data();
    }


    function implement_data(){
        $.ajax({
            url:"/CzTIqcuemD.php/basis/import/import",    //请求的url地址
            dataType:"json",   //返回格式为json
            async:true,//请求是否异步，默认为异步，这也是ajax重要特性
            data:{file_id:file_id,type:type,operation:'implement'},    //参数值
            type:"post",   //请求方式
            success:function(req){
                //请求成功时处理
                layer.close(index);
                if(req.code == 1){
                    $('.progress-status').html(req.data.schedule+'%');
                    $('.progress').animate({width:req.data.schedule+"%"},1000);
                    if(req.data.schedule == 100){
                        setTimeout(function (){
                            $('.progress-bar').hide();
                            $('.no_progress').show();
                            next_step();
                        },1000)
                    }else{
                        implement_data();
                    }
                }else{
                    layer.msg(req.msg);
                }
            },
            complete:function(){
                //请求完成的处理
                layer.close(index);
            },
        });
    }
</script>